import { useState, useEffect } from 'react'

const Child = (props) => {
    const [list, setList] = useState([])

    useEffect(() => {
        function fetchData() {
            fetch('http://121.89.205.189/api/pro/search?keyword=' + props.keyword)
                .then(res => res.json())
                .then(res => {
                    console.log(res) // 依赖项改变，代码重新执行
                    setList(res.data)
                })
        }
        fetchData()

        // componentWillUnmount
        return () => { // 如果组件多次渲染（通常如此），则在执行下一个 effect 之前，上一个 effect 就已被清除
            console.log(5555) // 依赖项改变，代码重新执行
        }
    }, [props.keyword])
    return (
        <>
            {
                list && list.map(item => (
                    <div key={item.proid}>{item.proid}</div>
                ))
            }
        </>
    )
}

const App = () => {
    const [keyword, setKeyword] = useState('手机')
    return (
        <div>
            <input type="text" value={keyword}
                onChange={(e) => {
                    setKeyword(e.target.value)
                }}
            /> {keyword}
            <Child keyword={keyword} />
        </div>
    )
}

export default App